<template>
  <div class="city-box" ref="wrapper">
    <div>
      <div class="city-content">
        <h4 class="title">当前城市</h4>
        <div class="label-list">
          <span class="active">{{activeCity}}</span>
        </div>
      </div>
      <div class="city-content">
        <h4 class="title">热门城市</h4>
        <div class="label-list">
          <span
            v-for="item of hotcity"
            :key="item.id"
          >
            {{item.name}}
          </span>
        </div>
      </div>
      <div class="city-content"
        v-for="(item, key) of allcity"
        :key="key"
      >
        <h4 class="title">{{key}}</h4>
        <ul class="city-all-list"
          v-for="item of item"
          :key="item.id"
        >
          <li>{{item.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hotcity: Array,
    allcity: Object
  },
  data () {
    return {
      activeCity: '上海'
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/public.styl'
.city-box
  position absolute
  top .86rem
  right 0
  bottom 0
  left 0
  overflow hidden
  .city-content
    .title
      font-size 0.28rem
      line-height .8rem
      background #f1f1f1
      font-weight 500
      padding 0 .2rem
      color #757575
    .label-list
      overflow hidden
      font-size .28rem
      padding: .1rem
      box-sizing border-box
      padding-right .6rem
    .label-list span
      display inline-block
      margin .1rem
      padding: 0 .2rem
      height .5rem
      line-height .5rem
      border: .01rem solid #f1f1f1;
      border-radius .05rem
    .label-list span.active
      border-color #000099
      color #000099
    .city-all-list
      font-size .28rem
      line-height .7rem
      height .7rem
      padding 0 .2rem
      box-sizing border-box
      padding-right .6rem
      li
        border-bottom .01rem solid #f1f1f1
</style>
